<template>
	<view>
		<view class="lbx">
			<view class="logo">
				<radio color="#C00000" v-if="showRadio" :checked="item.goods_state" @click="dianji(item)"></radio>
				<image :src="item.goods_small_logo || defaultPic"></image>
			</view>

			<view class="contect">
				<text style="width: 90%;">{{item.goods_name}}</text>
				<view class="c-box">
					<view style="display: flex;">
						<h4>￥{{item.goods_price | tofixed}}</h4>
						<h4 style="margin-left: 20rpx;" v-if="showcount">x{{item.goods_count}}</h4>
					</view>

					<!-- 总金额-->
					<view class="t" v-if="showall">
						<text>总:{{item.goods_all}}</text>
					</view>
					<!-- 发货状态 -->
					<view class="t" v-if="showif">
						<text v-if="item.goods_state==1">待发货</text>
						<text v-if="item.goods_state==2">待收货</text>
						<text v-if="item.goods_state==3">退款/退货</text>
					</view>
					<!-- 购物车的数量增删 -->
					<view style="display: flex;" v-if="showNum">
						<view class="x" @click="jian(item)">
							-
						</view>
						<view class="">
							{{item.goods_count}}
						</view>
						<view class="x" @click="add(item)">
							+
						</view>
					</view>
					<!-- 商品数量 -->
					<!-- 	<uni-number-box :min="1" :value="item.goods_count" @change="numChangeHandler" v-if="showNum">
					</uni-number-box> -->
				</view>

				<!-- 地址 -->
				<view class="address" v-if="showAddress">
					地址:{{item.goods_address}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		name: "my-goods",
		data() {
			return {
				defaultPic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.suning.cn%2Fuimg%2FZR%2Fshare_order%2F159825482654458586.jpg&refer=http%3A%2F%2Fimage.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654249639&t=83cabaf11fca96aa9e4b08799eccb63f'
			};
		},
		props: {
			item: {
				typeof: Object,
				default: {}
			},
			showRadio: {
				type: Boolean,
				// 如果外界没有指定 show-radio 属性的值，则默认不展示 radio 组件
				default: false,
			},
			// 是否展示价格右侧的 NumberBox 组件
			showNum: {
				type: Boolean,
				default: false,
			},
			showAddress: false,
			showif: false,
			showcount: false,
			showall: false
		},
		filters: {
			// 把数字处理为带两位小数点的数字
			tofixed(num) {
				return Number(num).toFixed(2)
			}
		},
		methods: {
			...mapMutations('m_cart', ['updateGoodsState']),
			dianji(goods) {
				goods.goods_state = !goods.goods_state
				console.log(goods.goods_state);
				const goodsid = goods.goods_id
				const goodsstate = goods.goods_state
				const xin = {
					goodsid,
					goodsstate
				}
				console.log(xin);
				this.updateGoodsState(xin)
			},
			// NumberBox 组件的 change 事件处理函数
			// numChangeHandler(val) {
			// 	// 通过 this.$emit() 触发外界通过 @ 绑定的 num-change 事件
			// 	this.$emit('num-change', {
			// 		// 商品的 Id
			// 		goods_id: this.item.goods_id,
			// 		// 商品的最新数量
			// 		goods_count: +val
			// 	})
			// },

			add(item) {
				item.goods_count = item.goods_count + 1
				this.$emit('num-change', {
					// 商品的 Id
					goods_id: this.item.goods_id,
					// 商品的最新数量
					goods_count: item.goods_count
				})
			},
			jian(item) {
				if (item.goods_count - 1 <= 0) return
				item.goods_count = item.goods_count - 1
				this.$emit('num-change', {
					// 商品的 Id
					goods_id: this.item.goods_id,
					// 商品的最新数量
					goods_count: item.goods_count
				})
			}
		}
	}
</script>

<style lang="scss">
	.lbx {
		display: flex;
		border-bottom: 3px solid #efefef;
		margin-bottom: 5px;

		.logo {
			margin-right: 10px;
			display: flex;
			align-items: center;

			image {
				width: 100px;
				height: 100px;
			}
		}

		.contect {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			text {
				padding-top: 10px;
				font-size: 15px;
			}

			.c-box {
				padding-top: 10px;
				display: flex;
				justify-content: space-between;

				.t {
					margin: 0rpx 20rpx;
					color: #fff;
					background-color: #c00000;
					padding: 5rpx 10rpx;
					border-radius: 10rpx;
				}

				.x {
					padding: 0rpx 15rpx;
					margin: 0rpx 25rpx;
					font-size: 36rpx;
					background-color: #c00000;
					color: #fff;
				}

				h4 {
					font-size: 18px;
					color: red;
				}
			}

			.address {
				padding: 10rpx 0rpx;
				font-size: 30rpx;
				display: inline-block;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 500rpx;
				white-space: nowrap;
			}

		}
	}
</style>